<template>
  <BMap ref="map" ak="2R1YHxczLVenQujWHAVwwmHl0o1RJzmP" enableScrollWheelZoom width="550px" height="400px" :zoom="zoom"
    @zoomend="zoomend" :mapType="mapType" :center="position" @click="biaoji">
    <BControl anchor="BMAP_ANCHOR_TOP_LEFT" :offset="{ x: 0, y: 0 }">
      <BAutoComplete style="width: 160px" @searchComplete="handleConfirm" ref="BAutoCompleteRef" v-show="false" />
    </BControl>
    <BMarker :position="position" />
    <BControl anchor="BMAP_ANCHOR_TOP_RIGHT" :offset="{ x: 0, y: 0 }">
      <el-select v-model="mapType" style="width: 120px">
        <el-option value="BMAP_NORMAL_MAP" label="常规地图" />
        <el-option value="BMAP_EARTH_MAP" label="地球模式" />
        <el-option value="BMAP_SATELLITE_MAP" label="卫星图" />
      </el-select>
    </BControl>
  </BMap>
</template>

<script setup lang="ts">
import {
  onMounted,
  ref,
  watch
} from 'vue';

import {
  BAutoComplete,
  BControl,
  BMap,
  BMarker,
  useAddressGeocoder,
  usePointGeocoder
} from 'vue3-baidu-map-gl';

const emit = defineEmits(['update:longitude', 'update:latitude', 'update:inputValAddress', 'update:addressOptions'])
const { longitude, latitude, inputValAddress, addressOptions } = defineProps({
  longitude: {
    type: Number,
    default: 39.916527
  },
  latitude: {
    type: Number,
    default: 116.397128
  },
  inputValAddress: {
    type: String,
    default: ''
  },
  addressOptions: {
    type: Array,
    defalut: () => []
  }
})
const map = ref(null)
const BAutoCompleteRef = ref(null)
const zoom = ref(8)
const mapType = ref('BMAP_NORMAL_MAP')
const position = ref({ lat: 39.915185, lng: 116.400901 })
const { get, result } = usePointGeocoder()
const addressGeocoder = useAddressGeocoder()
const xiangqing = ref({})
const searchAddress = ref({})
function biaoji(val) {
  get(val.latlng)
  position.value = val.latlng
  xiangqing.value = result
}
function search(e) {
  BAutoCompleteRef.value.$el.value = e
}
function search2(value) {
  addressGeocoder.get(value.city + value.district + value.business, value.city + value.district + value.business)
  // addressGeocoder.get(value.city || value.business, value.province + value.city + value.district + value.street + value.business)
  searchAddress.value = addressGeocoder.point
}
function handleConfirm(e) {
  emit('update:addressOptions', e._pois)
}

function zoomend(val) {
  zoom.value = val.target.zoomLevel
}

watch(() => xiangqing, (val) => {
  if (val.value?._rawValue?.address) {
    emit('update:longitude', val.value.value.point.lng)
    emit('update:latitude', val.value.value.point.lat)
    emit('update:inputValAddress', val.value?._rawValue?.address)
  }
}, { deep: true })

watch(() => searchAddress, (val) => {
  if (val.value._rawValue) {
    emit('update:longitude', val.value._rawValue.lng)
    emit('update:latitude', val.value._rawValue.lat)
    position.value = val.value._rawValue
  }
}, { deep: true })

onMounted(() => {
  position.value = { lat: latitude ? latitude : 39.916527, lng: longitude ? longitude : 116.397128 }
})
defineExpose({
  search,
  search2
})
</script>